<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>1.XMLHttpRequest</title>
</head>
<body>
  原生Ajax---XMLHttpRequest

  <!-- 1.xhr.readyState 5种状态 -->
  0--(未初始化)还没有调用send()方法
  1--(载入)已调用send()方法，正在发送请求
  2--(载入完成)send()方法执行完成，已经接收到全部相应内容
  3--(交互)正在解析相应内容
  4--(完成)相应内容解析完成，可以在客户端调用

  <!-- 2.xhr.status -->
  2xx--表示成功处理请求，如200
  3xx--需要重定向，浏览器直接跳转,如301(永久重定向)，
        302(临时重定向)，304(资源未改变，浏览器使用自身缓存，优化用)
  4xx--客户端请求错误，如404(客户端找不到，地址错)，
        403(客户端没有权限)
  5xx--服务端错误      




  <script>
    // 原生XMLHttpRequest

    // GET true表示开启异步  false表示同步
    const xhr = new XMLHttpRequest()
    xhr.open('GET', '/7.ajax/data/test.json', true)
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          console.log(xhr.responseText);
        } else {
          console.log('其他情况');
        }
      }
    }
    xhr.send(null)

    // POST
    /* const xhr = new XMLHttpRequest()
    xhr.open('POST', 'login', true)
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          console.log(xhr.responseText);
        } else {
          console.log('其他情况');
        }
      }
    }
    const postData = {
      name: 'zhangsan',
      pwd: 'xxx'
    }
    xhr.send(JSON.stringify(postData)) */

    // Promise封装ajax
    function ajax(url) {
      const p = new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest()
        xhr.open('GET', url, true)
        xhr.onreadystatechange = function() {
          if (xhr.readyState === 4) {
            if (xhr.status === 200) {
              resolve(JSON.parse(xhr.responseText))
            } else if (xhr.status === 404) {
              reject(new Error('404'))
            }
          }
        }
        xhr.send(null)
      })

      return p
    }
    const url = '/17.ajax/data/test.json'
    ajax(url).then((res) => {
      console.log(res);
    }).catch(err => {
      console.error(err);
    })



  </script>
  
</body>
</html>